import React from 'react';
import ReactDOM from 'react-dom';

class App extends React.Component { 
	constructor(props) {
		super(props);       
	}

	componentDidMount(){
		// 我的资产
    }   
	
	render() {
		return ( <div className="propertymain bor-top">
        <div className="property">
            <div className="head-div">               
                <div className="f34 fcw tal pl40 head-des">總資產</div>
                <div>
                    <div className="head-num" style={{borderRight:'1px solid #18d193'}}>
                       <span className="head-big-num" >200,000</span><br/><br/>
                       <span className="f24">賬戶價值</span>
                    </div>
                    <div className="head-num">
                       <span className="head-big-num">686.32</span><br/><br/>
                       <span>累計利息</span>
                    </div>
                </div>
            </div>
            <ul className="cards-list">
                <li>
                    <ul className="bgfw pb20 pl20 pr20">
                        <li className="p-title f36 fc0 strong"><span className="pre-sign fl"></span>Universal Life</li>
                
                        <li className="card-item">
                            <div className="card-top">
                                <p className="title f30">Wealth Preserver </p>
                                <p className="policy-num f26">保單號.82701231753819341</p>
                            </div>
                            <div className="card-bottom">
                                <ul className="card-data clearfix">
                                    <li className="data-item fl">
                                        <p className="price f36 fc0 strong">100,000</p>
                                        <p className="comment fc8">賬戶價值</p>
                                    </li>
                                    <li className="data-item fl">
                                        <p className="price f36 fc0 strong">3.1%</p>
                                        <p className="comment fc8">年化率</p>
                                    </li>
                                    <li className="data-item fl">
                                        <p className="price f36 fc0 strong">605.32</p>
                                        <p className="comment fc8">累計利息</p>
                                    </li>
                                </ul>
                                <ul className="btn-list clearfix">
                                    <li className="btn-item fr f26 fcw">領取</li>
                                    <li className="btn-item fr f26 fcw">追加投資</li>
                                    <li className="btn-item fr f26 fcw">退保</li>
                                </ul>
                            </div>
                        </li>
                        <li className="card-item mt20">
                            <div className="card-top">
                                <p className="title f30">Premium Life Plan</p>
                                <p className="policy-num f26">保單號.82701231753819341</p>



                            </div>
                            <div className="card-bottom">
                                <ul className="card-data clearfix">
                                    <li className="data-item fl">
                                        <p className="price f36 fc0 strong">50,000</p>
                                        <p className="comment fc8">賬戶價值</p>
                                    </li>
                                    <li className="data-item fl">
                                        <p className="price f36 fc0 strong">2.9%</p>
                                        <p className="comment fc8">年化率</p>
                                    </li>
                                    <li className="data-item fl">
                                        <p className="price f36 fc0 strong">40.50</p>
                                        <p className="comment fc8">累計利息</p>
                                    </li>
                                </ul>
                                <ul className="btn-list clearfix">
                                    <li className="btn-item fr f26 fcw strong">領取</li>
                                    <li className="btn-item fr f26 fcw">追加投資</li>
                                    <li className="btn-item fr f26 fcw">退保</li>
                                </ul>
                            </div>
                        </li>
                    </ul>
                </li>
                <li>
                    <ul className="bgfw mt20 pb20  pl20 pr20">
                        <li className="p-title f36 fc0 strong"><span className="pre-sign fl"></span>Invest Link</li>

                        <li className="card-item">
                            <div className="card-top">
                                <p className="title f30">Smart link</p>
                                <p className="policy-num f26">保單號.82701231753819341</p>
                            </div>
                            <div className="card-bottom">
                                <ul className="card-data clearfix">
                                    <li className="data-item fl">
                                        <p className="price f36 fc0 strong">50,000</p>
                                        <p className="comment fc8">賬戶價值</p>
                                    </li>
                                    <li className="data-item fl">
                                        <p className="price f36 fc0 strong">2.9%</p>
                                        <p className="comment fc8">年化率</p>
                                    </li>
                                    <li className="data-item fl">
                                        <p className="price f36 fc0 strong">40.50</p>
                                        <p className="comment fc8">累計利息</p>
                                    </li>
                                </ul>
                                <ul className="btn-list clearfix">
                                    <li className="btn-item fr f26 fcw">領取</li>
                                    <li className="btn-item fr f26 fcw">追加投資</li>
                                    <li className="btn-item fr f26 fcw">退保</li>
                                </ul>
                            </div>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>

    </div>
)
	}
}

export default App;   